<template>
  <view class="container">
    <!-- 搜索框 -->
    <view class="search">
    	<!-- <uni-icons type="tune" size="24" class="icons-s" @click="shuaixuan"></uni-icons> -->
	  <!-- <text  class="icons-s" @click="shuaixuan">筛选</text> -->
      <search tips="搜索商品" @event="$navTo('pages/search/index')" />
    </view>
	<!-- 普通弹窗 -->
	<uni-popup ref="popup" background-color="#fff">
		<view class="popup-content" :class="{ 'popup-height': type === 'left' || type === 'right' }">
			<radio-group @change="radioChange" class="group-s">
				<text>类型</text>
				<label class="uni-list-cell uni-list-cell-pd" v-for="(item, index) in items" :key="item.value">
					<view>
						<radio class="radio-button" :value="item.value" color="#fa2209" :checked="index === current" />
					</view>
					<view>{{item.name}}</view>
				</label>
			</radio-group>
		</view>
	</uni-popup>
 
    <!-- 一级分类 -->
    <primary
      v-if="setting.style == PageCategoryStyleEnum.ONE_LEVEL_BIG.value || setting.style == PageCategoryStyleEnum.ONE_LEVEL_SMALL.value"
      :display="setting.style" :list="list" />

    <!-- 二级分类 -->
    <secondary v-if="setting.style == PageCategoryStyleEnum.TWO_LEVEL.value" :list="list" />

    <!-- 分类+商品 -->
    <commodity v-if="setting.style == PageCategoryStyleEnum.COMMODITY.value" ref="mescrollItem" :list="list" :setting="setting" :exchange_type="exchange_type" />
  </view>
</template>

<script>
  import MescrollCompMixin from '@/uni_modules/mescroll-uni/components/mescroll-uni/mixins/mescroll-comp'
  import { setCartTabBadge } from '@/core/app'
  import SettingKeyEnum from '@/common/enum/setting/Key'
  import { PageCategoryStyleEnum } from '@/common/enum/store/page/category'
  import SettingModel from '@/common/model/Setting'
  import * as CategoryApi from '@/api/category'
  import Search from '@/components/search'
  import Primary from './components/primary'
  import Secondary from './components/secondary'
  import Commodity from './components/commodity'

  // 最后一次刷新时间
  let lastRefreshTime;

  export default {
    components: {
      Search,
      Primary,
      Secondary,
      Commodity
    },
    mixins: [MescrollCompMixin],
    data() {
      return {
        // 枚举类
        PageCategoryStyleEnum,
        // 分类列表
        list: [],
        // 分类模板设置
        setting: {},
        // 正在加载中
        isLoading: true,
		items: [{
			value: '10',
			name: '普通商品',
			checked: 'true'
		},
		{
			value: '20',
			name: '积分兑换商品'
		}],
		current: 0,
		exchange_type: 10,
		type: 'top'
      }
    },

    /**
     * 生命周期函数--监听页面加载
     */
    onLoad() {
      // 加载页面数据
      this.onRefreshPage()
    },

    /**
     * 生命周期函数--监听页面显示
     */
    onShow() {
      // 每间隔5分钟自动刷新一次页面数据
      const curTime = new Date().getTime()
      if ((curTime - lastRefreshTime) > 5 * 60 * 1000) {
        this.onRefreshPage()
      }
    },

    methods: {

      // 刷新页面
      onRefreshPage() {
        // 记录刷新时间
        lastRefreshTime = new Date().getTime()
        // 获取页面数据
        this.getPageData()
        // 更新购物车角标
        // setCartTabBadge()
      },
      radioChange: function(evt) {
            for (let i = 0; i < this.items.length; i++) {
                if (this.items[i].value === evt.detail.value) {
                    this.current = i;
					this.exchange_type = this.items[i].value
					// 关闭窗口后，恢复默认内容
					this.$refs.popup.close()
                    break;
                }
            }
        },
		shuaixuan() {
			this.$refs.popup.open('top')
		},
      // 获取页面数据
      getPageData() {
        const app = this
        app.isLoading = true
        Promise.all([
            // 获取分类模板设置
            // 优化建议: 可以将此处的false改为true 启用缓存
            SettingModel.data(false),
            // 获取分类列表
            CategoryApi.list()
          ])
          .then(result => {
            // 初始化分类模板设置
            app.initSetting(result[0])
            // 初始化分类列表数据
            app.initCategory(result[1])
          })
          .finally(() => app.isLoading = false)
      },

      /**
       * 初始化分类模板设置
       * @param {Object} result
       */
      initSetting(setting) {
        this.setting = setting[SettingKeyEnum.PAGE_CATEGORY_TEMPLATE.value]
      },

      /**
       * 初始化分类列表数据
       * @param {Object} result
       */
      initCategory(result) {
        this.list = result.data.list
      },

    },

    /**
     * 设置分享内容
     */
    onShareAppMessage() {
      const app = this
      return {
        title: _this.templet.shareTitle,
        path: '/pages/category/index?' + app.$getShareUrlParams()
      }
    },

    /**
     * 分享到朋友圈
     * 本接口为 Beta 版本，暂只在 Android 平台支持，详见分享到朋友圈 (Beta)
     * https://developers.weixin.qq.com/miniprogram/dev/framework/open-ability/share-timeline.html
     */
    onShareTimeline() {
      const app = this
      return {
        title: _this.templet.shareTitle,
        path: '/pages/category/index?' + app.$getShareUrlParams()
      }
    }

  }
</script>

<style>
  page {
    background: #fff;
  }
</style>
<style lang="scss" scoped>
  // 搜索框
  .search {
    position: fixed;
    top: var(--window-top);
    left: var(--window-left);
    right: var(--window-right);
    z-index: 9;
	display: flex;
	align-items: center;
  }
  .search-wrapper{
	  flex: 1.2
  }
  .icons-s{
	  padding-left: 20rpx;
  }
  .uni-list-cell{
	  display: flex;
	  margin-right: 20rpx;
	  align-items: center;
	  margin-left: 20rpx;
	  // .radio-button{
	  // 	  width: 40rpx; /* 设置宽度 */
	  // 	  height: 40rpx; /* 设置高度 */
	  // }
  }
 
  .group-s{
	  display: flex;
	  align-items: center;
	  padding: 40rpx 20rpx;
  }
</style>